<template>
    <el-row :gutter="50" justify="space-between">
        <el-col :span="16">
            <Header></Header>
            <div class="list">
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="知识列表" name="first">
                        <div class="lists">
                            <Knowledgeall :type="1" :list="state.list" :total="state.total" :admin_id="state.admin_id" @delkey="delkey"></Knowledgeall>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="审核中" name="first1">
                        <div class="lists">
                            <Knowledgeall :type="1" :list="state.list" :total="state.total" :admin_id="state.admin_id" @delkey="delkey"></Knowledgeall>
                        </div>
                    </el-tab-pane>

                </el-tabs>
                <div class="pation" v-if="state.total > 4">
                    <el-pagination background layout="prev, pager, next" :total="state.total" page-size="5" @current-change="currentChange">
                    </el-pagination>
                </div>
            </div>
        </el-col>
        <el-col :span="8">
            <Right></Right>
        </el-col>
    </el-row>
</template>
<script>
    import Header from "@/components/common/header";
    import { reactive, onMounted } from "vue";
    import Right from "@/components/common/right";
    import Knowledgeall from "@/components/common/Knowledgeall";
    import { getKnowledgeBaseHall,delKnowledge } from "@/request/api";
    import { ElMessageBox } from 'element-plus'
    const state = reactive({
        list: [],
        total: 0,
        page: 1,
        ktype: 1,
        admin_id: 0,
        status: 1
    })
    export default {
        name: "listKnowledge",
        components: { Header, Right, Knowledgeall },
        setup() {
            const init = () => {
                let param = {
                    page: state.page,
                    pageSize: 5,
                    status: state.status
                }
                getKnowledgeBaseHall(param).then(res => {
                    state.list = res.data.data;
                    state.total = res.data.total
                    let userpar = localStorage.getItem('user')
                    let user = JSON.parse(userpar);
                    state.admin_id = user.id
                })
            }
            const delkey = (index) => {
                ElMessageBox.confirm("确认后将无法恢复", "您确定要删除吗?", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                    .then(() => {
                        let id = state.list[index].id

                        let param = {
                            kb_id : id
                        }
                        delKnowledge(param).then(res => {
                            init()
                        })
                    })
                    .catch(() => {
                    });
            }

            //切换
            const handleClick = (tab, event) => {
                state.page = 1
                state.ktype = (Number(tab.index) + Number(1))
                if(tab.index == 1){
                    state.status = 0
                }else{
                    state.status = 1
                }
                init()
            }
            //分页
            const currentChange = (val) => {
                if (val !== state.page) {
                    state.page = val
                    return init()
                }
            }
            onMounted(async () => {
                await init()
            })
            return {
                activeName: "first",
                state,
                delkey,
                handleClick,
                currentChange
            };
        }
    };
</script>
<style lang="scss">
    .lists {
        background: white;
        padding: 25px 20px 20px 20px;
        border-radius: 15px;

        .el-tabs__item.is-active {
            font-weight: bold;
        }

        .list {
            margin-top: 20px;
        }
    }
    .pation {
        text-align: center;
        background: white;
        padding: 15px;
    }
    .list-none {
        text-align: center;
        margin-top: 30px;
        .l-str {
            margin-top: 15px;
            color: #929496;
            font-size: 15px;
        }
        .l-img {
            width: 200px;
        }
    }
</style>
